<template>
	<el-dropdown trigger="hover" @command="handleSizeChange">
		<div>
			<svg-icon icon-class="size" :size="size" />
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item
					v-for="item of sizeOptions"
					:key="item.value"
					:disabled="appStore.size == item.value"
					:command="item.value"
				>
					{{ item.label }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";

defineProps({
	size: {
		type: String,
		required: false
	}
});

const sizeOptions = ref([
	{ label: "默认", value: "default" },
	{ label: "大型", value: "large" },
	{ label: "小型", value: "small" }
]);

const appStore = useAppStore();
/**
 * @description: 选择尺寸
 * @param {*} size
 */
function handleSizeChange(size: SettingType["size"]) {
	appStore.setSize(size);
	switch (size) {
		case "large":
			document.documentElement.style.fontSize = "16px";
			break;
		case "small":
			document.documentElement.style.fontSize = "12px";
			break;
		default:
			document.documentElement.style.fontSize = "14px";
	}
	ElMessage.success("切换布局大小成功");
}

onMounted(() => {
	handleSizeChange(appStore.size);
});
</script>
